<template>
    <div class="header">
        <el-menu mode="horizontal" router="true" default-active="/" class="head-menu" collapse-transition>
            <div  style="float: right;height: 40px;">
                <el-button size="small"  v-if="!currentUser" @click="showLogin = true">
                    <i class="el-icon-user" style="font-size: 15px">登录</i>
                </el-button>
                <el-popover v-else
                        placement="bottom"
                        :width="200"
                        trigger="hover"
                        popper-class="popper-user-box"  >
                    <template #reference>
                        <div class="author">
                            <i class="icon el-icon-user" />
                            {{ currentUser && currentUser.name || '无名氏' }}
                            <i class="el-icon-caret-bottom" />
                        </div>
                    </template>
                    <div class="nickname" >
                        <p>姓名：{{ currentUser && currentUser.name || '' }}</p>
                        <p>邮箱：{{ currentUser && currentUser.email || '' }}</p>
                    </div>
                    <el-button size="small" effect="dark" class="logout" @click="logout">注销</el-button>
                </el-popover>
            </div>
        </el-menu>
    </div>
    <el-dialog title="" v-model="showLogin" width="35%" center>
        <Auth @close="showLogin = false"></Auth>
    </el-dialog>
</template>

<script>
    import Auth from "../pages/Auth.vue";
    import userService from "../utils/userService";
    import http from "../utils/req";
    import {ElMessage} from "element-plus/es";
    import router from "../router";
    export default {
        name: "FrontHeader",
        components: {Auth},
        data(){
            return{
                showLogin: false,
            }
        },
        methods:{
            logout(){
                http.post('/auth/logout').then((value => {
                    if (value.data.code === 200){
                        ElMessage.success({
                            message: value.data.msg||'注销成功',
                            type: 'success',
                            zIndex: -1
                        });
                        userService.setCurrentUser(null);
                        http.init(true)
                        document.location.reload();
                    }else {
                        ElMessage.warning(value.data.msg);
                    }
                }))
            }
        },
        computed:{
            currentUser(){
                return userService.currentUser;
            }
        }
    }
</script>

<style scoped>
    .header{
        padding-left: 10px;
        padding-right: 30px;
    }
    .el-menu-item{
        min-width: 100px;
    }
</style>